 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视觉盛宴</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--给标题添加图片-->
    <link rel="icon" href="./照片墙.png" type="image/x-icon">
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .masonry-grid {
                column-count: 1;
                column-gap: 1.5rem;
            }
            @screen md {
                .masonry-grid {
                    column-count: 2;
                }
            }
            @screen lg {
                .masonry-grid {
                    column-count: 3;
                }
            }
            @screen xl {
                .masonry-grid {
                    column-count: 4;
                }
            }
            .masonry-item {
                break-inside: avoid;
                margin-bottom: 1.5rem;
            }
            .img-hover-zoom {
                overflow: hidden;
            }
            .img-hover-zoom img {
                transition: transform 0.5s ease;
            }
            .img-hover-zoom:hover img {
                transform: scale(1.05);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-camera-retro text-primary text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold text-dark">视觉盛宴</h1>
            </div>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#" class="font-medium hover:text-primary transition-colors">首页</a>
                <a href="#categories" class="font-medium hover:text-primary transition-colors">分类</a>
                <a href="#featured" class="font-medium hover:text-primary transition-colors">精选</a>
                <a href="#about" class="font-medium hover:text-primary transition-colors">关于</a>
            </nav>
            
            <!-- 搜索按钮 -->
            <div class="hidden md:block">
                <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                    <i class="fa fa-search text-gray-500"></i>
                    <span>搜索图片</span>
                </button>
            </div>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-gray-700 focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#" class="py-2 font-medium hover:text-primary transition-colors">首页</a>
                <a href="#categories" class="py-2 font-medium hover:text-primary transition-colors">分类</a>
                <a href="#featured" class="py-2 font-medium hover:text-primary transition-colors">精选</a>
                <a href="#about" class="py-2 font-medium hover:text-primary transition-colors">关于</a>
                <div class="relative">
                    <input type="text" placeholder="搜索图片..." class="w-full px-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-search absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="https://picsum.photos/id/1018/1920/1080" alt="壮丽的自然风景" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/40"></div>
        </div>
        <div class="container mx-auto px-4 z-10 text-center">
            <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-white mb-6 leading-tight animate-fade-in">
                发现世界的<br class="md:hidden"> 美丽瞬间
            </h1>
            <p class="text-[clamp(1rem,3vw,1.5rem)] text-white/90 mb-10 max-w-3xl mx-auto">
                探索来自全球摄影师的精选作品，感受视觉艺术的魅力与力量
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#gallery" class="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-full transition-all transform hover:scale-105 shadow-lg">
                    开始探索
                </a>
                <a href="#categories" class="px-8 py-3 bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white font-medium rounded-full transition-all border border-white/30">
                    浏览分类
                </a>
            </div>
        </div>
        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-white animate-bounce">
            <a href="#gallery" class="flex flex-col items-center">
                <span class="mb-2 text-sm">向下滚动</span>
                <i class="fa fa-chevron-down"></i>
            </a>
        </div>
    </section>

    <!-- 图片分类 -->
    <section id="categories" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">按分类浏览</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">探索不同主题的精美摄影作品，找到你喜爱的风格与内容</p>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6">
                <a href="#" class="category-card group relative overflow-hidden rounded-xl h-40 md:h-56">
                    <img src="https://picsum.photos/id/10/500/500" alt="自然风景" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 text-white">
                        <i class="fa fa-tree mb-2 text-lg"></i>
                        <h3 class="font-bold">自然</h3>
                        <p class="text-sm text-white/80">128张作品</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative overflow-hidden rounded-xl h-40 md:h-56">
                    <img src="https://picsum.photos/id/1016/500/500" alt="城市建筑" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 text-white">
                        <i class="fa fa-building mb-2 text-lg"></i>
                        <h3 class="font-bold">城市</h3>
                        <p class="text-sm text-white/80">94张作品</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative overflow-hidden rounded-xl h-40 md:h-56">
                    <img src="https://picsum.photos/id/26/500/500" alt="野生动物" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 text-white">
                        <i class="fa fa-paw mb-2 text-lg"></i>
                        <h3 class="font-bold">动物</h3>
                        <p class="text-sm text-white/80">76张作品</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative overflow-hidden rounded-xl h-40 md:h-56">
                    <img src="https://picsum.photos/id/292/500/500" alt="美食摄影" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 text-white">
                        <i class="fa fa-cutlery mb-2 text-lg"></i>
                        <h3 class="font-bold">美食</h3>
                        <p class="text-sm text-white/80">62张作品</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative overflow-hidden rounded-xl h-40 md:h-56">
                    <img src="https://picsum.photos/id/64/500/500" alt="人像摄影" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 text-white">
                        <i class="fa fa-user mb-2 text-lg"></i>
                        <h3 class="font-bold">人像</h3>
                        <p class="text-sm text-white/80">88张作品</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative overflow-hidden rounded-xl h-40 md:h-56">
                    <img src="https://picsum.photos/id/1059/500/500" alt="抽象艺术" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 text-white">
                        <i class="fa fa-paint-brush mb-2 text-lg"></i>
                        <h3 class="font-bold">抽象</h3>
                        <p class="text-sm text-white/80">53张作品</p>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- 精选图片 -->
    <section id="featured" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-12">
                <div>
                    <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">本月精选</h2>
                    <p class="text-gray-600 max-w-2xl text-lg">由我们的编辑精心挑选的高质量摄影作品</p>
                </div>
                <a href="#" class="mt-4 md:mt-0 text-primary font-medium hover:underline flex items-center">
                    查看全部 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="relative overflow-hidden rounded-2xl group">
                    <img src="https://picsum.photos/id/1039/1200/800" alt="壮丽山脉湖泊风景" class="w-full h-[500px] object-cover transition-transform duration-700 group-hover:scale-105">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                        <div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                            <span class="inline-block px-3 py-1 bg-primary text-white text-sm rounded-full mb-3">自然风景</span>
                            <h3 class="text-2xl font-bold text-white mb-2">高山湖泊的清晨</h3>
                            <p class="text-white/90 mb-4">捕捉于瑞士阿尔卑斯山脉，湖面如镜般倒映着壮丽的山峰</p>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="摄影师头像" class="w-10 h-10 rounded-full object-cover border-2 border-white">
                                <div class="ml-3">
                                    <p class="text-white font-medium">马克·施密特</p>
                                    <p class="text-white/80 text-sm">专业风景摄影师</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div class="relative overflow-hidden rounded-xl group">
                        <img src="https://picsum.photos/id/1074/600/800" alt="城市夜景" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                            <span class="inline-block px-2 py-1 bg-primary text-white text-xs rounded-full mb-2">城市</span>
                            <h3 class="text-lg font-bold text-white">城市之光</h3>
                        </div>
                    </div>
                    
                    <div class="relative overflow-hidden rounded-xl group">
                        <img src="https://picsum.photos/id/366/600/800" alt="森林中的雾气" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                            <span class="inline-block px-2 py-1 bg-primary text-white text-xs rounded-full mb-2">自然</span>
                            <h3 class="text-lg font-bold text-white">晨雾弥漫</h3>
                        </div>
                    </div>
                    
                    <div class="relative overflow-hidden rounded-xl group">
                        <img src="https://picsum.photos/id/1062/600/800" alt="海浪拍打岩石" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                            <span class="inline-block px-2 py-1 bg-primary text-white text-xs rounded-full mb-2">海景</span>
                            <h3 class="text-lg font-bold text-white">海洋之力</h3>
                        </div>
                    </div>
                    
                    <div class="relative overflow-hidden rounded-xl group">
                        <img src="https://picsum.photos/id/177/600/800" alt="沙漠日落" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                            <span class="inline-block px-2 py-1 bg-primary text-white text-xs rounded-full mb-2">自然</span>
                            <h3 class="text-lg font-bold text-white">沙漠余晖</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 图片画廊 -->
    <section id="gallery" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">探索画廊</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">浏览我们精心收集的高质量摄影作品，发现视觉之美</p>
            </div>
            
            <!-- 筛选标签 -->
            <div class="flex flex-wrap justify-center gap-2 md:gap-4 mb-10">
                <button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">全部</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">自然</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">城市</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">动物</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">美食</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">人像</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">抽象</button>
            </div>
            
            <!-- 图片网格 - 瀑布流布局 -->
            <div class="masonry-grid">
                <!-- 图片项目 1 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/10/800/1000" alt="山间河流风景" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2.5 py-0.5 rounded">自然</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">山间溪流</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">亚历克斯·李</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片项目 2 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/1031/800/600" alt="城市天际线" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-purple-100 text-purple-800 px-2.5 py-0.5 rounded">城市</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">都市天际线</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/91/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">莎拉·王</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片项目 3 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/237/800/1200" alt="黑色拉布拉多犬" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-green-100 text-green-800 px-2.5 py-0.5 rounded">动物</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">忠诚伙伴</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/22/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">迈克尔·陈</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片项目 4 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/292/800/800" alt="精致的甜点摆盘" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-yellow-100 text-yellow-800 px-2.5 py-0.5 rounded">美食</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">甜点艺术</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/65/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">艾米丽·张</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片项目 5 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/64/800/1100" alt="人物肖像" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-pink-100 text-pink-800 px-2.5 py-0.5 rounded">人像</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">沉思时刻</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/177/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">大卫·吴</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片项目 6 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/1059/800/700" alt="抽象艺术图案" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-indigo-100 text-indigo-800 px-2.5 py-0.5 rounded">抽象</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">色彩交织</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/23/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">奥利维亚·林</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片项目 7 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/1015/800/900" alt="雪山风景" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2.5 py-0.5 rounded">自然</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">雪山之巅</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/91/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">托马斯·贝克</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片项目 8 -->
                <div class="masonry-item group">
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow img-hover-zoom">
                        <img src="https://picsum.photos/id/1067/800/1000" alt="城市街道" class="w-full">
                        <div class="p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-xs font-medium bg-purple-100 text-purple-800 px-2.5 py-0.5 rounded">城市</span>
                                <div class="flex items-center space-x-3">
                                    <button class="text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary transition-colors">
                                        <i class="fa fa-bookmark-o"></i>
                                    </button>
                                </div>
                            </div>
                            <h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors">雨后街道</h3>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="摄影师头像" class="w-6 h-6 rounded-full mr-2">
                                <span class="text-sm text-gray-600">克里斯·王</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多按钮 -->
            <div class="text-center mt-12">
                <button id="load-more" class="px-8 py-3 bg-gray-100 hover:bg-gray-200 text-dark font-medium rounded-full transition-all transform hover:scale-105 flex items-center mx-auto">
                    <i class="fa fa-refresh mr-2"></i> 加载更多
                </button>
            </div>
        </div>
    </section>

    <!-- 关于部分 -->
    <section id="about" class="py-20 bg-gray-900 text-white">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-6">关于我们的画廊</h2>
                    <p class="text-gray-300 mb-6 text-lg">视觉盛宴是一个致力于展示高质量摄影作品的平台，我们汇集了来自全球各地摄影师的精彩作品，涵盖自然、城市、人像等多个领域。</p>
                    <p class="text-gray-300 mb-8">我们相信每一张照片都讲述着一个独特的故事，通过这个平台，我们希望让更多人能够欣赏到这些视觉艺术的魅力，同时也为摄影师提供一个展示自己作品的空间。</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-full transition-all transform hover:scale-105">
                            了解更多
                        </a>
                        <a href="#" class="px-6 py-3 bg-transparent hover:bg-white/10 text-white font-medium rounded-full transition-all border border-white/30">
                            加入我们
                        </a>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <img src="https://picsum.photos/id/1019/600/800" alt="风景摄影" class="rounded-lg shadow-lg transform translate-y-8">
                    <img src="https://picsum.photos/id/1023/600/800" alt="人像摄影" class="rounded-lg shadow-lg">
                </div>
            </div>
        </div>
    </section>

    <!-- 订阅部分 -->
    <section class="py-16 bg-primary">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-white mb-4">不错过任何精彩</h2>
                <p class="text-white/90 mb-8 text-lg">订阅我们的通讯，获取最新的精选图片和摄影灵感</p>
                <form class="flex flex-col sm:flex-row gap-3 max-w-xl mx-auto">
                    <input type="email" placeholder="输入您的邮箱地址" class="flex-1 px-5 py-3 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50">
                    <button type="submit" class="px-6 py-3 bg-white text-primary font-medium rounded-full transition-all transform hover:scale-105 hover:shadow-lg">
                        订阅
                    </button>
                </form>
                <p class="text-white/70 text-sm mt-4">我们尊重您的隐私，不会向第三方分享您的信息</p>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-camera-retro text-primary text-2xl"></i>
                        <h3 class="text-xl font-bold">视觉盛宴</h3>
                    </div>
                    <p class="text-gray-400 mb-6">探索世界的美丽瞬间，感受视觉艺术的魅力与力量</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-pinterest"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
                        <li><a href="#gallery" class="text-gray-400 hover:text-primary transition-colors">画廊</a></li>
                        <li><a href="#categories" class="text-gray-400 hover:text-primary transition-colors">分类</a></li>
                        <li><a href="#featured" class="text-gray-400 hover:text-primary transition-colors">精选作品</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-primary transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">分类</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">自然风景</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">城市建筑</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">野生动物</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">美食摄影</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">人像摄影</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">Email:1928489482@qq.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">安徽工程大学(国际工程师学院)7-9宿舍楼B629寝室</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">Call:+19359017714</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 视觉盛宴. 保留所有权利.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">使用条款</a>
                        <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Cookie 政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 图片查看器模态框 -->
    <div id="image-viewer" class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 opacity-0 pointer-events-none transition-opacity duration-300">
        <button id="close-viewer" class="absolute top-6 right-6 text-white text-3xl hover:text-gray-300 transition-colors">
            <i class="fa fa-times"></i>
        </button>
        <button id="prev-image" class="absolute left-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-gray-300 transition-colors">
            <i class="fa fa-chevron-left"></i>
        </button>
        <button id="next-image" class="absolute right-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-gray-300 transition-colors">
            <i class="fa fa-chevron-right"></i>
        </button>
        <div class="max-w-5xl w-full px-4 py-8">
            <img id="viewer-image" src="" alt="大图预览" class="max-h-[80vh] mx-auto">
            <div class="mt-6 text-white">
                <h3 id="viewer-title" class="text-2xl font-bold mb-2"></h3>
                <div class="flex items-center mb-4">
                    <img id="viewer-author-avatar" src="" alt="摄影师头像" class="w-10 h-10 rounded-full mr-3">
                    <span id="viewer-author" class="text-gray-300"></span>
                </div>
                <p id="viewer-description" class="text-gray-400"></p>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动菜单
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
        
        // 图片查看器功能
        const imageViewer = document.getElementById('image-viewer');
        const viewerImage = document.getElementById('viewer-image');
        const viewerTitle = document.getElementById('viewer-title');
        const viewerAuthor = document.getElementById('viewer-author');
        const viewerAuthorAvatar = document.getElementById('viewer-author-avatar');
        const viewerDescription = document.getElementById('viewer-description');
        const closeViewer = document.getElementById('close-viewer');
        const prevImage = document.getElementById('prev-image');
        const nextImage = document.getElementById('next-image');
        
        // 图片数据
        const imagesData = [
            {
                src: "https://picsum.photos/id/10/800/1000",
                title: "山间溪流",
                author: "亚历克斯·李",
                authorAvatar: "https://picsum.photos/id/64/100/100",
                description: "位于阿尔卑斯山脉的一条清澈溪流，水流湍急但清澈见底，周围环绕着茂密的森林和岩石。"
            },
            {
                src: "https://picsum.photos/id/1031/800/600",
                title: "都市天际线",
                author: "莎拉·王",
                authorAvatar: "https://picsum.photos/id/91/100/100",
                description: "城市中心的天际线，高楼林立，黄昏时分的灯光逐渐亮起，形成一幅现代都市的繁华景象。"
            },
            {
                src: "https://picsum.photos/id/237/800/1200",
                title: "忠诚伙伴",
                author: "迈克尔·陈",
                authorAvatar: "https://picsum.photos/id/22/100/100",
                description: "一只黑色拉布拉多犬在草地上的肖像，眼神忠诚而温柔，展现了宠物与人类之间的特殊纽带。"
            },
            {
                src: "https://picsum.photos/id/292/800/800",
                title: "甜点艺术",
                author: "艾米丽·张",
                authorAvatar: "https://picsum.photos/id/65/100/100",
                description: "精致的法式甜点摆盘，每一道甜点都像是一件艺术品，色彩搭配和谐，让人垂涎欲滴。"
            },
            {
                src: "https://picsum.photos/id/64/800/1100",
                title: "沉思时刻",
                author: "大卫·吴",
                authorAvatar: "https://picsum.photos/id/177/100/100",
                description: "一位年轻女子在窗边沉思的瞬间，柔和的光线照亮她的侧脸，表情宁静而深邃。"
            },
            {
                src: "https://picsum.photos/id/1059/800/700",
                title: "色彩交织",
                author: "奥利维亚·林",
                authorAvatar: "https://picsum.photos/id/23/100/100",
                description: "抽象艺术摄影，通过色彩和光影的交织创造出梦幻般的视觉效果，引发观者的无限想象。"
            },
            {
                src: "https://picsum.photos/id/1015/800/900",
                title: "雪山之巅",
                author: "托马斯·贝克",
                authorAvatar: "https://picsum.photos/id/91/100/100",
                description: "高耸入云的雪山，山顶覆盖着厚厚的积雪，云雾缭绕其间，展现出大自然的壮丽与神秘。"
            },
            {
                src: "https://picsum.photos/id/1067/800/1000",
                title: "雨后街道",
                author: "克里斯·王",
                authorAvatar: "https://picsum.photos/id/64/100/100",
                description: "雨后的城市街道，地面倒映着霓虹灯的光芒，湿润的空气让整个城市显得格外清新。"
            }
        ];
        
        let currentImageIndex = 0;
        
        // 打开图片查看器
        function openImageViewer(index) {
            currentImageIndex = index;
            const image = imagesData[index];
            
            viewerImage.src = image.src.replace('/800/', '/1600/'); // 加载更大尺寸
            viewerTitle.textContent = image.title;
            viewerAuthor.textContent = image.author;
            viewerAuthorAvatar.src = image.authorAvatar;
            viewerDescription.textContent = image.description;
            
            imageViewer.classList.remove('opacity-0', 'pointer-events-none');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }
        
        // 关闭图片查看器
        function closeImageViewer() {
            imageViewer.classList.add('opacity-0', 'pointer-events-none');
            document.body.style.overflow = ''; // 恢复滚动
        }
        
        // 上一张图片
        function showPrevImage() {
            currentImageIndex = (currentImageIndex - 1 + imagesData.length) % imagesData.length;
            openImageViewer(currentImageIndex);
        }
        
        // 下一张图片
        function showNextImage() {
            currentImageIndex = (currentImageIndex + 1) % imagesData.length;
            openImageViewer(currentImageIndex);
        }
        
        // 为所有图片项添加点击事件
        const imageItems = document.querySelectorAll('.masonry-item');
        imageItems.forEach((item, index) => {
            item.addEventListener('click', () => openImageViewer(index));
        });
        
        // 绑定事件监听器
        closeViewer.addEventListener('click', closeImageViewer);
        prevImage.addEventListener('click', showPrevImage);
        nextImage.addEventListener('click', showNextImage);
        
        // 键盘导航
        document.addEventListener('keydown', (e) => {
            if (!imageViewer.classList.contains('pointer-events-none')) {
                if (e.key === 'Escape') closeImageViewer();
                if (e.key === 'ArrowLeft') showPrevImage();
                if (e.key === 'ArrowRight') showNextImage();
            }
        });
        
        // 点击背景关闭
        imageViewer.addEventListener('click', (e) => {
            if (e.target === imageViewer) {
                closeImageViewer();
            }
        });
        
        // 加载更多按钮
        document.getElementById('load-more').addEventListener('click', function() {
            // 模拟加载状态
            this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                // 复制现有图片并添加到画廊
                const gallery = document.querySelector('.masonry-grid');
                const existingItems = document.querySelectorAll('.masonry-item');
                existingItems.forEach(item => {
                    const clone = item.cloneNode(true);
                    gallery.appendChild(clone);
                    
                    // 为新添加的项目绑定点击事件
                    clone.addEventListener('click', () => {
                        const index = Array.from(gallery.children).indexOf(clone) % imagesData.length;
                        openImageViewer(index);
                    });
                });
                
                // 恢复按钮状态
                this.innerHTML = '<i class="fa fa-refresh mr-2"></i> 加载更多';
            }, 1500);
        });
    </script>
</body>
</html>
